﻿<template>
  <div class="dress_new">
    <header_ title="装扮商城" :pathName="this.$store.state.pathName" background='#ffffff' color='#000000' image_='0'
      size='5.8vw'>
      <template slot="share">
        <div class="right_box" @click="tomybackpack">
          <img src="../../public/img/dress_new/beibao.png" alt="" />
        </div>
      </template>
    </header_>
    <div class="dress_load" v-if="dressloadShow">
      <van-loading color="#1989fa" size="80" :vertical="true" class="dress_load_load" />
    </div>
    <div v-else class="tltle_dress">
      <!-- <div class="top_dress">
        <div @click="appPrimordial"></div>
        <div>装扮商城</div>
        <div class="right_box" @click="tomybackpack">
          <img src="../../public/img/dress_new/beibao.png" alt="" />
        </div>
      </div> -->
      <div class="Topcontent" :style="Weixin_?'margin-top:2vw':''">
        <div>最近上新</div>
        <div class="content_">
          <div v-for="(item, index) in index_list.new_list" :key="index" class="box_single" @click="showPopup(item)">
            <div>
              <img :src="item.image" alt="" />
            </div>
            <div>{{ item.goodsName }}</div>

            <div v-if="item.diamond > 0">
              <span>{{ item.diamond }}</span>
              <img src="../../public/img/dress_new/zuanshi.png" alt="" />
            </div>
            <div v-else>活动领取</div>
          </div>
        </div>
      </div>

      <div class="Bottomcontent">
        <div class="bottom_title">
          <div v-for="(item, index) in index_list.category_list" :key="index"
            @click="tab = index,get_userid(item.cat_id)" :class="{ active: tab == index }">
            {{ item.cat_name }}
            <div :class="{ active_boder: tab == index }"></div>
          </div>
        </div>
        <div class="content_">
          <div v-for="(item, index) in index_list.goods_list" :key="index" class="box_single" @click="showPopup(item)">
            <div>
              <img :src="item.image" alt="" />
            </div>
            <div>{{item.goodsName}}</div>
            <div v-if="item.diamond>0">
              <span>{{item.diamond}}</span><img src="../../public/img/dress_new/zuanshi.png" alt="" />
            </div>
            <div v-else>
              活动领取
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" round :style="{ height: '130vw' }">
      <div class="model_top">
        <img :style="item_index.catId=='4'?'width:66vw':''" v-if="issvga(item_index.imageFile)" :src="item_index.image" alt="" />
        <img v-else :src="item_index.imageFile" alt="" />
        <div class="top_position">
          <span>{{ item_index.day }}天</span>
          <span>|</span>
          <span>{{istabber(item_index.catId)}}</span>
        </div>
        <!-- {{ item.imageFile | issvga }} -->
        <div v-if="issvga(item_index.imageFile)" @click="palysvgaClick(item_index.imageFile)">
          <img  src="../../public/img/dress_new/goplay.png" alt="" />
        </div>
      </div>
      <div class="midel_center">
        <div>{{ item_index.goodsName }}</div>
        <div>
          {{ item_index.goodsName }}是声贝专属头像框，可通过
          <span v-if="item_index.diamond">购买</span>
          <span v-else>活动</span> 获取。
        </div>
        <div class="ExchangeQquantity">
          <div>兑换数量:</div>
          <div class="calculation">
            <div class="addsbut">
              <div @click="reduce" v-show="item_index.diamond"></div>
              <input type="number" v-model="exchange_num" :disabled="!item_index.diamond>0" />
              <div @click="plus" v-show="item_index.diamond"></div>
            </div>
            <div v-if="item_index.diamond" @click="maximum(item_index.diamond)">最大</div>
            <div v-else class="disable">最大</div>
          </div>
        </div>
        <div class="ExchangeQquantity">
          <div>有效期:</div>
          <div class="calculation_">
            <div class="box_dian" @click="iscur = '1'">
              <img v-if="iscur == '1'" src="../../public/img/dress_new/xuanzhong.png" alt="" />
              <img v-else src="../../public/img/dress_new/bukexuanze.png" alt="" />
              <span>{{item_index.day}}天</span>
            </div>
            <!-- <div class="box_dian" @click="iscur = '2'">
              <img
                v-if="iscur == '2'"
                src="../../public/img/dress_new/xuanzhong.png"
                alt=""
              />
              <img
                v-else
                src="../../public/img/dress_new/bukexuanze.png"
                alt=""
              />
              <span>15天</span>
            </div>
            <div class="box_dian" @click="iscur = '3'">
              <img
                v-if="iscur == '3'"
                src="../../public/img/dress_new/xuanzhong.png"
                alt=""
              />
              <img
                v-else
                src="../../public/img/dress_new/bukexuanze.png"
                alt=""
              />
              <span>30天</span>
            </div> -->
          </div>
        </div>
        <div class="ExchangeQquantity">
          <div>赠送好友:</div>
          <div id="calculation_2" v-if="goods_friends">
            <div class="img_close" v-if="formLabelAlign.head_pic" @click="img_close">
              <img src="../../public/img/other/cha2.jpg" alt="">
            </div>
            <div class="friend_name" v-if="formLabelAlign.head_pic" @click="tofollowFriends">
              <img :src="formLabelAlign.head_pic" alt="" />
              <div>{{ formLabelAlign.nickname }}</div>
            </div>
            <img src="../../public/img/dress_new/arrow-up-l.png" alt="" @click="tofollowFriends" />
          </div>
          <div id="calculation_2" v-else>
            <div class="friend_name nofriend">
              <div>你还没有好友</div>
            </div>
            <img src="../../public/img/dress_new/arrow-up-l.png" alt="" />
          </div>
        </div>
        <div class="buy_" v-if="item_index.diamond>0">
          <div class="Price">
            <div class="top_price">
              <img src="../../public/img/dress_new/zuanshi.png" alt="" />
              <span>{{item_index.diamond | exchange_num_value(exchange_num)}}</span>
              <div class="discount" v-if="item_index.old_diamond">
                <span>原价:{{item_index.old_diamond | exchange_num_value(exchange_num) }}</span>
                <div></div>
              </div>
              <div v-if="item_index.old_diamond">{{ ((item_index.diamond/item_index.old_diamond)*10).toFixed(1) }}折
              </div>
            </div>
            <div @click="toexch">
              <span>{{index_list.diamond_money}}钻</span>
              <span>|</span>
              <span>充值 ></span>
            </div>
          </div>
          <div @click="set_userid(item_index.goodsId,formLabelAlign.user_id)">立即购买</div>
        </div>
        <div class="Participate" v-else @click="toactivity_url(index_list.activity_url)">仅限活动领取</div>
      </div>
    </van-popup>
    <div class="dress_bofang" v-show="bofangShow" @click="guanbiCLick">
      <div id="svgaBox" class="svgabox1" ref="canvas"></div>
    </div>
  </div>
</template>

<script>
  import {
    Toast
  } from "vant";
  import "../../assets/js/svga.min.js";
  import header_ from '../../components/header_'
  export default {
    data() {
      return {
        Buynow: true, //立即购买，头像框false参与
        iscur: "1",
        tab: '1',
        dressloadShow: true,
        show: false,
        item_index: {},
        bofangShow: false,
        exchange_num: 1, //兑换数量
        formLabelAlign: {}, //好友信息
        index_list: {}, //首页信息
        history: [], //存储查询历史记录的数据
        goods_friends: false, //是否有好友
        Weixin_:false,
      };
    },
    components: {
      header_
    },
    watch: {
      exchange_num: {
        handler: function () {
          if (this.exchange_num > 999) {
            this.exchange_num = 999;
            return Toast("最多兑换999");
          } else {
            if (this.item_index.diamond * this.exchange_num > this.index_list.diamond_money) {
              return Toast("钻石数不足")
            } else {
              return this.exchange_num = Math.floor(Math.abs(this.exchange_num));
            }
          }
        },
        deep: true,
      },
    },
    filters: {
      exchange_num_value(diamond, exchange_num) {
        if (exchange_num == 0) {
          return 0
        } else {
          return exchange_num * diamond
        }
      },
    },
    metaInfo: {
      meta: [{
        name: "is_hidden_menu",
        content: "1"
      }],
    },
    created() {
      if (window.isWeixin) {
        this.Weixin_ = true
      } else {
        this.Weixin_ = false
      }
      this.$store.commit("empty");
      if (this.$route.query.friends_) {
        let formObj = decodeURIComponent(this.$route.query.friends_);
        this.formLabelAlign = JSON.parse(formObj);
        this.show = true;
        this.item_index = this.$store.state.dress_new[0];
        this.exchange_num = this.$store.state.dress_new[1];
        console.log(this.$store.state);
      }
      this.get_userid();
      this.get_friend();
      //状态栏颜色
      // setStatusBarTheme（ 0） 黑色字体
      // setStatusBarTheme（ 1） 白色字体
      var u = navigator.userAgent;
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      // console.log(isiOS);
      if (isiOS) {
        if (window.webkit) {
          window.webkit.messageHandlers.setStatusBarTheme.postMessage({
            setStatusBarTheme: 0
          });
        }
      } else {
        console.log("安卓");
        app.setStatusBarTheme(0)
      }
    },
    methods: {
      appPrimordial() {
        var json = {
          "name": "iphone",
          "price": 666
        }; //创建对象；
        console.log(this.$.parseParam(json));
        // if (window.isiOS) {
        //   window.webkit.messageHandlers.pageJumpRecharge.postMessage({});
        // } else {
        //   app.pageJumpRecharge();
        // }
      },
      img_close() {
        this.formLabelAlign = {}
      },
      get_friend() {
        let arys = {}; //参数
        let url = "/message/friend";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.goods_friends = res.data.result.length ? true : false;
          }
        });
      },
      istabber(cat_id) {
        let that = this;
        var statusStyle = "";
        if (that.index_list.category_list) {
          that.index_list.category_list.forEach(item => {
            if (item.cat_id == cat_id) {
              statusStyle = item.cat_name;
            }
          });
          return statusStyle
        }
      },
      tofollowFriends() {
        this.$store.commit("dress_new", [this.item_index, this.exchange_num]);
        this.$router.push("/followFriends");
      },
      issvga(value) {
        if (value) {
          let type = [];
          type = value.split(".").pop();
          if (type == 'svga') {
            return true;
          } else {
            return false;
          }
        }
      },
      maximum(num) {
        if (this.item_index.diamond > this.index_list.diamond_money) {
          return Toast("钻石数不足")
        }
        this.exchange_num = Math.floor(this.index_list.diamond_money / num)
      },

      palysvgaClick(path_) {
        let that = this;
        let path = path_;
        let player = new SVGA.Player("#svgaBox");
        player.loops = 1;
        player.clearsAfterStop = false;
        let parser = new SVGA.Parser("#svgaBox");
        //注意，这里必须是服务器地址，否则报错
        this.bofangShow = true;
        parser.load(path, function (videoItem) {
          player.setVideoItem(videoItem);
          player.startAnimation();
          player.onFinished(() => {
            // alert('结束')
            that.guanbiCLick();
          });
        });
      },
      guanbiCLick() {
        this.bofangShow = false;
      },
      //兑换数量减
      reduce() {
        if (this.exchange_num < 2) {
          return Toast("兑换数量不能少于1");
        }
        this.exchange_num--;
      },
      //兑换数量加
      plus() {
        this.exchange_num++;
      },
      showPopup(item) {
        this.exchange_num = 1;
        // this.formLabelAlign = {};
        console.log(item);
        (this.item_index = item), (this.show = true);
      },
      //首页
      get_userid(catId) {
        let arys = {
          catId: catId?catId:'2',
        }; //参数
        let url = "/goods/index";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.index_list = res.data.result;
            console.log(this.index_list);
            this.dressloadShow = false;
          } else {
            Toast(res.data.text);
          }
        });
      },

      set_userid(goodId, member_id) {
        if (this.exchange_num == '' || this.exchange_num == 0) {
          return Toast("购买数量不能为空")
        }
        if (this.item_index.diamond * this.exchange_num > this.index_list.diamond_money) {
          return Toast("钻石不足")
        }
        console.log(goodId, member_id, this.exchange_num);
        let arys = {
          goodId: goodId,
          num: this.exchange_num,
          memberId: member_id
        }; //参数
        let url = "/goods/buygoods";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            Toast(res.data.text);
            console.log(this.index_list);
            this.get_userid()
          } else {
            Toast(res.data.text);
          }
        });
      },
      tomybackpack() {
        this.$store.commit("empty");
        this.$store.commit("change", "/dress_new");
        this.$router.push("/myBackpack");
      },
      toexch() {
        if (window.isiOS) {
          window.webkit.messageHandlers.pageJumpRecharge.postMessage({});
        } else {
          app.pageJumpRecharge();
        }
      },
      //跳转活动
      toactivity_url(url_) {
        // console.log(url_);
        window.location.href  = url_
        // window.open(url_, "_blank");
      },

    },
  };
</script>
<style scoped>
  .friend_name>div {
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #323233;
    padding-left: 1vw;
    padding-right: 2vw;
    width: 20vw;
    text-align: left;
    white-space: nowrap;
    /*强制在一行显示*/
    text-overflow: ellipsis;
    /*设置超出内容显示...*/
    overflow: hidden;
    /*一定不能少 超出的内容进行隐藏*/
  }

  .nofriend>div {
    color: #b7b7be;
  }

  .friend_name>img {
    border-radius: 50%;
    width: 5.8vw;
    height: 5.8vw;
  }

  .friend_name {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .Participate {
    width: 80vw;
    /* background: linear-gradient(135deg, #01d5ff 0%, #ca22ff 100%); */
    background: gray;
    border-radius: 5.3vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    font-size: 3.86vw;
    padding: 4vw 0vw;
    text-align: center;
    line-height: 3vw;
    margin: 0 auto;
  }

  .disable {
    background: #B4B4B4 !important;
  }

  .buy_>div:nth-of-type(2) {
    width: 30.8vw;
    height: 10.6vw;
    background: linear-gradient(135deg, #01d5ff 0%, #ca22ff 100%);
    border-radius: 5.3vw;
    text-align: center;
    line-height: 10.6vw;
    font-size: 3.8vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #ffffff;
  }

  .Price>div:nth-of-type(2) {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #989898;
    font-size: 3.4vw;
  }

  .top_price>div:nth-of-type(2) {
    font-size: 2.66vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    padding: 1vw 2vw;
    background: #ca22ff;
    border-radius: 1vw;
    margin-left: 1vw;
  }

  .discount>div {
    position: absolute;
    width: 94%;
    height: 1px;
    top: 2vw;
    background: #000;
  }

  .discount>span {
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .discount {
    padding-left: 1vw;
  }

  .top_price>span {
    font-size: 4.8vw;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    padding-left: 1vw;
  }

  .discount {
    position: relative;
    display: flex;
  }

  .top_price>img {
    height: 3.4vw;
    width: 4.3vw;
  }

  .top_price {
    display: flex;
    align-items: center;
    /* justify-content: center; */
  }

  .Price {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .buy_ {
    width: 100%;
    height: 10.6vw;
    display: flex;
    justify-content: space-between;
    margin-top: 2.8vw;
  }

  #calculation_2>img:nth-of-type(1) {
    width: 2.5vw;
    height: 4.2vw;
  }

  .img_close {
    width: 4.2vw;
    height: 4.2vw;
    border: 1px solid rgb(167, 164, 164);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 3vw;
  }

  .img_close img {
    width: 88%;
    height: 88%;
    border-radius: 50%;
  }

  .ExchangeQquantity>#calculation_2 {
    width: 40vw;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .box_dian>span {
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #323233;
    line-height: 7.2vw;
  }

  .box_dian>img {
    width: 4.3vw;
    height: 4.3vw;
  }

  .calculation_>div {
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .calculation_ {
    width: 42vw;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .calculation>div:nth-of-type(2) {
    width: 13.5vw;
    height: 7.2vw;
    border-radius: 3.6vw;
    background: linear-gradient(135deg, #01d5ff 0%, #ca22ff 100%);
    text-align: center;
    line-height: 7.2vw;
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }

  .addsbut>div:nth-of-type(1) {
    width: 7.2vw;
    height: 7.2vw;
  }

  .addsbut>div:nth-of-type(2) {
    width: 7.2vw;
    height: 7.2vw;
  }

  .addsbut>input {
    width: 10.5vw;
    height: 7.2vw;
    border: 0;
    text-align: center;
  }

  .calculation>div:nth-of-type(1) {
    width: 25vw;
    height: 7.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../../public/img/dress_new/xuanzeqi.png") no-repeat;
    background-size: contain;
  }

  .ExchangeQquantity>div:nth-of-type(2) {
    display: flex;
    width: 41vw;
    height: 100%;
    justify-content: flex-end;
    align-items: center;
  }

  .ExchangeQquantity>div:nth-of-type(1) {
    font-size: 4.3vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
  }

  .ExchangeQquantity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 10vw;
    margin: 1.5vw 0;
  }

  .midel_center>div:nth-of-type(1) {
    width: 100%;
    height: 8vw;
    display: flex;
    align-items: center;
    font-size: 4.3vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #111111;
    margin-top: 4vw;
  }

  .midel_center>div:nth-of-type(2) {
    width: 100%;
    height: 8vw;
    display: flex;
    align-items: center;
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #989898;
    margin: 1.5vw 0;
  }

  .midel_center {
    width: 92vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }

  .top_position>span:nth-of-type(1) {
    color: #ffef30;
  }

  .top_position>span:nth-of-type(2) {
    padding: 0 1vw;
  }

  .model_top>div:nth-of-type(2)>img {
    width: 100%;
    height: 100%;
  }

  .model_top>div:nth-of-type(2) {
    position: absolute;
    width: 16vw;
    height: 16vw;
  }

  .model_top>div:nth-of-type(1) {
    position: absolute;
    right: 0;
    top: 0vw;
    background: rgba(127, 146, 225, 0.7);
    border-radius: 0px 0px 0px 3.86vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.86vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #fff;
    padding: 1.5vw 2vw;
  }

  .model_top>img {
    width: 31.6vw;
    /* height: 31.6vw; */
  }

  .model_top {
    width: 100vw;
    height: 48vw;
    background: linear-gradient(360deg, #eceffe 0%, #a0afeb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .active {
    font-size: 4.3vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #000000;
  }

  .active_boder {
    width: 3.8vw;
    height: 1vw;
    background: #116bf5;
    border-radius: 1vw;
  }

  .bottom_title>div {
    /* display: flex; */
    padding: 0 2vw 0 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .bottom_title {
    width: 94vw;
    height: 8vw;
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #989898;
    display: flex;
  }

  .Bottomcontent {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .box_single>div:nth-of-type(3)>img {
    width: 2.6vw;
    height: 2vw;
    padding-left: 1vw;
  }

  .box_single>div:nth-of-type(3)>span {
    font-size: 2.66vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #989898;
  }

  .box_single>div:nth-of-type(3) {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.66vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #989898;
  }

  .box_single>div:nth-of-type(2) {
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    display: flex;
    justify-content: center;
    margin: 1vw;
  }

  .box_single>div:nth-of-type(1)>img {
    width: 20vw;
    /* height: 20vw; */
  }

  .box_single>div:nth-of-type(1) {
    width: 23.2vw;
    height: 23.2vw;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .box_single {
    width: 28vw;
    height: 39vw;
    background: #ffffff;
    box-shadow: 1px 1vw 2vw 0px rgba(16, 100, 165, 0.2);
    border-radius: 1.45vw;
    margin-left: 2.4vw;
    margin-bottom: 3.86vw;
  }

  .content_ {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    margin-top: 3.4vw;
    margin-bottom: 4.8vw;
  }

  .Topcontent>div:nth-of-type(1) {
    font-size: 4.4vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #000000;
  }

  .Topcontent {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 26.6vw;
  }

  .right_box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .right_box>img {
    width: 100%;
    height: 100%;
  }

  .top_dress>div:nth-of-type(3) {
    width: 19.3vw;
    height: 6.3vw;
    border-radius: 3.2vw;
    background: linear-gradient(135deg, #01d5ff 0%, #ca22ff 100%);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .top_dress>div:nth-of-type(2) {
    height: 10.6vw;
    font-size: 5.8vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    display: flex;
    align-items: center;
  }

  .top_dress>div:nth-of-type(1) {
    width: 12.3vw;
    height: 100%;
    display: flex;
    align-items: center;

  }

  .top_dress>div:nth-of-type(1) img {
    width: 3vw;
    height: 4vw;
    transform: rotate(180deg);
  }

  .top_dress {
    position: fixed;
    width: 94vw;
    left: 3vw;
    height: 10.6vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10vw;
    background: #F6F7F9;
    z-index: 999;
  }

  .tltle_dress {
    width: 94vw;
    /* height: 100vh; */
    margin: 0 auto;
    overflow: hidden;
  }

  .dress_load {
    width: 100vw;
    height: 100vh;
    position: relative;
  }

  .dress_load_load {
    margin-top: 40vh;
  }

  .dress_new {
    width: 100vw;
    background: #ffffff;
  }

  .dress_bofang {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    z-index: 99999;
  }

  .svgabox1 {
    width: 100vw;
    height: 100vh;
  }

  .midel_center>div:nth-of-type(2)>span {
    color: #ca22ff;
  }

  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

    html,
    body {
      height: 812px;
    }
  }
</style>